<!-- 
	回到顶部组件 
	1、回到顶部设置：按钮大小、距离顶部、悬浮位置、图标
-->
<template>
	<div class="component-wrapper" style="position: relative" :class="className">
		<!-- style -->
		<!--<div v-html="css"></div>-->
		<!--回到顶部静态-->
		<div class="fixed-box" :style="{top : `${data.overTop + 114}px`}">
			<div class="btn" :style="button_style">
				<image :src="data.iconUrl || emptyImage"
					:style="{'width': data.buttonSize+'px', 'height': data.buttonSize+'px'}" @click="backTop">
				</image>
			</div>
		</div>
	</div>
</template>

<script>
	import emptyImage from "@/static/images/backtotop@2x.png";
	export default {
		name: 'u_backup',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						//按钮大小
						"buttonSize": {
							type: Number,
							default: 40
						},
						//距离顶部
						"overTop": {
							type: Number,
							default: 450
						},
						//悬浮位置
						"positionLocation": {
							type: String,
							default: 'left'
						},
						//图标
						"iconUrl": {
							type: String,
							default: ''
						}
					}
				}
			}
		},
		computed: {
			/** 样式 */
			button_style() {
				// 自定义样式
				const {
					buttonSize,
					positionLocation,
				} = this.data;

				return `
			                width: ${buttonSize}px;
			                height: ${buttonSize}px;
			                margin-left: ${positionLocation =='left'?'10':385-buttonSize}px;
			            `;
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},

		},
		data() {
			return {
				emptyImage
			}
		},
		methods: {
			// 点击图片回到顶部方法，加计时器是为了过渡顺滑
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	// 默认
	// .component-wrapper {
	//   display: flex;
	//   justify-content: center;
	//   width: 375px;
	// }

	.fixed-box {
		width: 100%;
		position: fixed;
		top: 114px;
		z-index: 2;

		.btn {
			width: 50px;
			height: 50px;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			flex-direction: column;
			font-size: 13px;

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
</style>
